<template>
  <div>
    <NForm :label-width="80">
      <NFormItem label="标题:">
        <NInput
          placeholder="一个吸引人的标题是很重要的！当然对你有意义更重要！"
          v-model:value="value.title"
        />
      </NFormItem>
      <NFormItem label="社区:">
        <NSelect
          v-model:value="value.community_id"
          :options="communityList"
          label-field="community_name"
          value-field="community_id"
          children-field="children"
          filterable
        ></NSelect>
      </NFormItem>
      <NFormItem label="简述:">
        <NInput
          placeholder="简单描述一下~"
          :show-count="true"
          maxlength="255"
          type="textarea"
          v-model:value="value.description"
        />
      </NFormItem>
      <NFormItem label="封面:">
        <div class="border-card">
          <cldUpload scene="封面" v-model="value.cover">
            <template #refrence="{ data }">
              <div>
                <NButton
                  strong
                  quaternary
                  round
                  type="error"
                  :loading="data.isLoading"
                  >{{ value.cover ? "重新上传" : "上传封面" }}</NButton
                >
              </div>
            </template>
          </cldUpload>
          <div style="text-align: left">
            <NImage
              :key="value.cover"
              v-if="value.cover"
              width="200"
              height="200"
              object-fit="cover"
              :src="downloadFile(value.cover)"
              alt=""
            />
          </div>
        </div>
      </NFormItem>
      <NFormItem label="正文:">
        <WE v-model="value.content" />
      </NFormItem>
    </NForm>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, withDefaults } from "vue";
import { downloadFile, FileResult } from "~/api/file";
import { SendNewPostParams } from "~/api/post/types";
import { NImage, NForm, NFormItem, NInput, NButton, NSelect } from "naive-ui";
import WE from "~/components/WE.vue";
import cldUpload from "~/components/cld-upload/index.vue";
import { getCommunityLists } from "~/api/community/index";
import { ICommunityListItem } from "~/api/community/types";
interface Props {
  value: SendNewPostParams;
}
const props = withDefaults(defineProps<Props>(), {
  value() {
    return {
      community_id: "1",
      content: "",
      status: 1,
      title: "",
      cover: "",
      description: "",
    };
  },
});
const communityList = ref<ICommunityListItem[]>([]);
const handleGetCommunityLists = async () => {
  const res = await getCommunityLists();
  communityList.value = res.result;
};
onMounted(() => {
  handleGetCommunityLists();
});
</script>
<style lang="scss" scoped>
.n-input,
.n-base-selection .n-base-selection-label {
  background-color: transparent !important;
}
</style>
